<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>云南森林火灾大数据平台</title>

  <style>
    table,tbody,tfoot,thead,tr,th,td {
      margin:0;
      padding:0;
      outline:0;
      font-size:100%;
      vertical-align:baseline;
      background:transparent;
      border-collapse:collapse;
      border-spacing:0;
      border:0px;
    }
    .tablebox {
      width:1000px;
      height:200px;
      overflow:hidden;
      margin:50px auto;
    }
    .tablebox table {
      width:100%;
    }
    .tablebox table th,.tablebox table td {
      font-size:12px;
      text-align:center;
      line-height:36px;
    }
    .tablebox table th {
      color:#2584e3;
      background-color:#f6f6f6;
    }
    .tablebox table td img {
      display:inline-block;
      vertical-align:middle;
    }
    .tablebox table tbody tr:nth-child(even) {
      background-color:#f6f6f6;
    }
    .tablebox.table_md table td,.tablebox.table_md table th {
      line-height:40px;
    }
  </style>
  <style>


    .container1{
      margin:30px auto;
      width:1100px;
      position:relative;
    }
    .container1 p{
      text-align:center;
      margin:0px  auto;
    }
    /*下面两个是核心样式*/
    .beat-char {
      line-height: 3em;
      position: relative;
      display: inline-block;
      background: transparent;

    }

    .rotate{
      transform:rotate(360deg) ;
      -ms-transform:rotate(360deg); 	/* IE 9 */
      -moz-transform:rotate(360deg); 	/* Firefox */
      -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
      -o-transform:rotate(360deg);
      -webkit-transition-duration: 0.7s;

    }
  </style>
  <base href="./">
  <!-- Bootstrap -->
  <link href="css/home/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/home/animate.css">
  <link rel="stylesheet" type="text/css" href="css/home/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="css/home/jquery.bxslider.css">
  <link rel="stylesheet" type="text/css" href="css/home/normalize.css" />
  <link rel="stylesheet" type="text/css" href="css/home/demo.css" />
  <link rel="stylesheet" type="text/css" href="css/home/set1.css" />
  <link rel="stylesheet" type="text/css" href="css/home/overwrite.css" >
  <link rel="stylesheet" type="text/css" href="css/home/style.css" >
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div id="systemHead" class="container" style="width: 100%">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header" style="width: 30%">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse.collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!--固定了宽度，加了字体重量-->
      <a class="navbar-brand" href="index.html" style="width: 500px"><span style="font-weight: bold;padding-left: 50px">云南森林火灾大数据平台</span></a>
    </div>

    <div class="navbar-collapse collapse" style="width: 55%;">
      <div class="menu">
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="index.html">首页</a></li>
          <li role="presentation"><a href="html/functionalAreas/forestDataDisplay.html">各森林数据展示</a></li>
          <li role="presentation"><a href="html/functionalAreas/forestFireForecast.html">林火预测</a></li>
          <li role="presentation"><a href="html/functionalAreas/dronePatrol.html">无人机巡逻</a></li>
          <li role="presentation"><a href="html/systemManagement/index.html">系统管理</a></li>

          <div style="margin-top: 10px;margin-left: 50px">
            <a style="color: #fff;margin-left: 100px" href="html/loginAndRegister/login.html">登录</a>
            <a style="color: #fff; margin-left: 25px" href="html/loginAndRegister/register.html">注册</a>
          </div>
        </ul>

      </div>

    </div>

  </div>
</nav>


<div class="container">
  <div class="row">
    <div class="slider">
      <div class="img-responsive">
        <ul class="bxslider">
          <li><img src="images/home/propoganda/propoganda01.jpg" alt=""/></li>
          <li><img src="images/home/propoganda/propoganda02.jpg" alt=""/></li>
          <li><img src="images/home/propoganda/propoganda03.jpg" alt=""/></li>
          <li><img src="images/home/propoganda/propoganda05.jpg" alt=""/></li>
          <li><img src="images/home/propoganda/propoganda06.jpg" alt=""/></li>
          <li><img src="images/home/propoganda/propoganda07.jpg" alt=""/></li>
          <li><img src="images/home/propoganda/propoganda08.jpg" alt=""/></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="container1" >
      <p style="font-size: 30px;">林火小课堂</p>
      <p  class="beatText" style="padding: 0px;text-align: left;">森林火灾是森林最危险的敌人，也是林业最可怕的灾害，它会给森林带来最有害，最具有毁灭性的后果。森林火灾不但烧毁成片的森林，伤害林内的动物，而且还降低森林的繁殖能力，引起土壤的贫瘠并破坏森林涵养水源，甚至会导致生态环境失去平衡。</p>
<!--      <p  class="beatText" style="padding: 0px;text-align: left;">在扑灭森林火灾时，只要控制住发生火灾的任何一因素，都能使火熄灭。</p>-->
<!--      <p  class="beatText" style="padding: 0px;text-align: left">原理：</p>-->
<!--      <p  class="beatText" style="padding: 0px;text-align: left">1、降低可燃物的温度，低于燃点以下。2、阻隔可燃物，破坏连续燃烧的条件。3、使可燃物与氧气隔绝。</p>-->
<!--      <p  class="beatText" style="padding: 0px;text-align: left">  基本方法：</p>-->
<!--      <p  class="beatText" style="padding: 0px;text-align: left">1、冷却法</p>-->
<!--      <p  class="beatText" style="padding: 0px;text-align: left">在燃烧的可燃物上洒水、化学药剂或湿土用来降低热量，让可燃物温度降到燃点以下，使火熄灭。</p>-->
<!--      <p  class="beatText" style="padding: 0px;text-align: left">2、隔离法</p>-->
<!--      <p  class="beatText" style="padding: 0px;text-align: left">采取阻隔的手段，使火与可燃物分离、使已燃的物质与未燃的物质分隔。一般采取在可燃物上面喷洒化学药剂，或用人工扑打、机翻生土带、采用高速风力、提前火烧、适度爆破等办法开设防火线（带）等，使火与可燃物、已燃烧的可燃物与未燃烧的可燃物分隔。同时通过向已燃烧的可燃物洒水或药剂，也能增加可燃物的耐火性和难燃性。</p>-->
<!--      <p  class="beatText" style="padding: 0px;text-align: left">3、窒息法</p>-->
<!--      <p  class="beatText" style="padding: 0px;text-align: left">通过隔绝空气使空气中的含氧率降低到14—18%以下，而使火窒息。一般采用机具扑打，用土覆盖，洒化学药剂，使用爆破等手段使火窒息。</p>-->
<!--      <p  class="beatText" style="padding: 0px;text-align: left"></p>-->


<!--      <p id="rotateText">我是旋转字体的，你鼠标移上来看看</p>-->

<!--      <p id="autoText">看我跳是不收钱的，免费看，上面两基佬都是鼠标移才动真懒</p>-->
<!--      <p id="roloadText">正在加载中...</p>-->

<!--      <p id="autoRotateText">我是刷杂技的，边跳边翻跟头..............</p>-->
    </div>
    <hr>
  </div>
</div>

<div class="container"  style="background: rgb(52,145, 116)">
  <div class="row" style="border: solid 1px #0000ff">
    <div class="box" style="display: flex;">
      <div class="col-md-4" style="border: solid 1px #0000FF;flex: 3;height: 443px;margin: 10px 0 10px 10px;background: #ffffff">
        <div class="wow bounceIn" data-wow-offset="0" data-wow-delay="0.4s">
          <div style="border-bottom: solid 1px #0000FF"><h4>时政要闻</h4></div>
          <ul style="text-align: left;padding-top: 30px">
            <li>习近平向世界第三届世界顶尖科学家论坛做视频致辞</li>
            <li>习近平向世界第三届世界顶尖科学家论坛做视频致辞</li>
            <li>习近平向世界第三届世界顶尖科学家论坛做视频致辞</li>
            <li>习近平向世界第三届世界顶尖科学家论坛做视频致辞</li>
            <li>习近平向世界第三届世界顶尖科学家论坛做视频致辞</li>
            <li>习近平向世界第三届世界顶尖科学家论坛做视频致辞</li>
          </ul>
          <div class="ficon">
            <a href="#" class="btn btn-default" role="button">Read more</a>
          </div>
        </div>
      </div>

      <div class="col-md-4" style="border: solid 1px #0000FF;flex: 5;height: 443px;margin: 10px 0 10px 30px;background: #fff">
        <div class="wow bounceIn" data-wow-offset="0" data-wow-delay="1.0s">
            <div style="border-bottom: solid 1px #0000FF"><h4>今日森林火险等级预报</h4></div>
            <div class="message" style="height: 300px">
              <div style="float:left;padding-top: 50px;"><img src="images/home/02.jpg" alt=""></div>
              <div style="float: left;width: 212px;height:250px;margin-left: 23px;margin-top:48px;text-align: left;border: solid 1px #0000FF;">云南省今日各个地区皆为低火险地区，请相关部门做好预防工作，消除隐患！</div>
            </div>

          <div class="ficon">
            <a href="#" class="btn btn-default" role="button">Read more</a>
          </div>
        </div>
      </div>

      <div class="col-md-4" style="border: solid 1px #0000FF;flex: 3;margin:10px 10px 10px 30px;height: 443px;background: #fff">
        <div class="wow bounceIn" data-wow-offset="0" data-wow-delay="1.6s">
          <div style="border-bottom: solid 1px #0000FF"><h4>林草新闻</h4></div>
          <div class="news">
            <ul style="text-align: left;padding-top: 30px">
              <li>《习近平谈治国理政》第三卷金句之人与自然和谐共生</li>
              <li>金沙江边   “有心插柳”柳成林</li>
              <li>金彩秋韵————秋醉大兴安岭</li>
              <li>荒山披绿  点石成金————为石漠化治理提供技术支撑</li>
              <li>林草防治总站组织参加纪念中国人民志愿军抗美援朝出国作战70周年档案文献展览</li>
            </ul>
          </div>

          <div class="ficon" style="margin-top: 100px">
            <a href="#" class="btn btn-default" role="button">Read more</a>
          </div>
        </div>

      </div>

    </div>
  </div>
</div>

<!--<div class="container">-->
<!--  <div class="row">-->
<!--    <div class="col-md-6 col-md-offset-3">-->
<!--      <div class="text-center">-->
<!--        <h2>Galleries</h2>-->
<!--        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit Cras suscipit arcu<br>-->
<!--          vestibulum volutpat libero sollicitudin vitae Curabitur ac aliquam <br>-->
<!--        </p>-->
<!--      </div>-->
<!--      <hr>-->
<!--    </div>-->
<!--  </div>-->
<!--</div>-->
<div class="container" style="margin-top: 30px" > </div>
<div class="row" style="width: 1170px;margin: auto">
  <div class="tablebox" style=";margin: auto;margin-top: 20px;margin-bottom: 20px">
  <table id="tableId" border="0" cellspacing="0" cellpadding="0">
    <thead>
    <tr>

      <th>宣传标语</th>

    </tr>
    </thead>
    <tbody>
    <tr>
      <td>1</td>
      <td>森林护我家，防火靠大家。</td>
    </tr>
    <tr>
      <td>2</td>
      <td>梅兰松竹，株株棵棵皆为友，倍加爱护；</td>
    </tr>
    <tr>
      <td>3</td>
      <td>防森林火灾，保绿色家园，筑生态屏障。</td>
    </tr>
    <tr>
      <td>4</td>
      <td>烤火令你暂时一热，火灾让人永久心寒。</td>
    </tr>
    <tr>
      <td>5</td>
      <td>让心灵的火花绽放，让森林的火花熄灭！</td>
    </tr>
    <tr>
      <td>6</td>
      <td>星星之火，可以燎原；森林防火，重在堵源。</td>
    </tr>
    <tr>
      <td>7</td>
      <td>无论春夏秋冬，防火在我心中。</td>
    </tr>
    <tr>
      <td>8</td>
      <td>全民总动员，防火保安全。</td>
    </tr>
    <tr>
      <td>9</td>
      <td>森林防火常年抓，保护森林靠大家。</td>
    </tr>
    <tr>
      <td>10</td>
      <td>小小蝼蚁可以蛀毁巍巍长堤，星星之火能够烧掉莽莽林海。</td>
    </tr>

    </tbody></table>
</div>
</div>
</div>
<div class="content">
  <div class="grid">
    <figure class="effect-zoe">
      <img src="images/home/03.jpg" alt="img03"/>
      <figcaption>
        <h2>Title <span>Name</span></h2>
        <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
      </figcaption>
    </figure>
    <figure class="effect-zoe">
      <img src="images/home/04.jpg" alt="img04"/>
      <figcaption>
        <h2>直升机驰援 <span></span></h2>
        <p class="description">中国直升机紧急驰援昆明森林火灾救援工作</p>
      </figcaption>
    </figure>
  </div>
</div>

<div class="content">
  <div class="grid">
    <figure class="effect-zoe">
      <img src="images/home/05.jpg" alt="img05"/>
      <figcaption>
        <h2>Title <span>Name</span></h2>
        <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
      </figcaption>
    </figure>
    <figure class="effect-zoe">
      <img src="images/home/06.jpg" alt="img06"/>
      <figcaption>
        <h2>Title <span>Name</span></h2>
        <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
      </figcaption>
    </figure>
  </div>
</div>


<footer style="padding-top: 100px">
  <div class="last-div" style="margin-top:600px;height: 60px">
    <div class="container">
      <div class="row">
        <div class="copyright">
          © 2020 云南森林火灾大数据平台 | <a href="html/aboutUs/contactUs.html">联系我们</a>
        </div>
        <!--
            All links in the footer should remain intact.
            Licenseing information is available at: http://bootstraptaste.com/license/
            You can buy this theme without footer links online at: http://bootstraptaste.com/buy/?theme=eNno
        -->
      </div>
    </div>
    <div class="container">
      <div class="row">
        <ul class="social-network">
          <li><a href="html/aboutUs/websiteIntroduction.html" data-placement="top" style="color: #fff">网站简介</a></li>
          <li><a href="html/aboutUs/partners.html" data-placement="top" style="color: #fff" >合作伙伴</a></li>
          <li><a href="html/aboutUs/teamIntroduction.html" data-placement="top" style="color: #fff" >团队介绍</a></li>
        </ul>
      </div>
    </div>

    <a href="" class="scrollup"><i class="fa fa-chevron-up"></i></a>


  </div>
</footer>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/home/jquery-2.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/home/bootstrap.min.js"></script>
<script src="js/home/wow.min.js"></script>
<script src="js/home/jquery.easing.1.3.js"></script>
<script src="js/home/jquery.isotope.min.js"></script>
<script src="js/home/jquery.bxslider.min.js"></script>
<script type="text/javascript" src="js/home/fliplightbox.min.js"></script>
<script src="js/home/functions.js"></script>
<script type="text/javascript">$('.portfolio').flipLightBox()</script>
<script type="text/javascript" src="js/home/autoPlay.js"></script>
<!--宣传栏-->
<script>
  // 参数1 tableID,参数2 div高度，参数3 速度，参数4 tbody中tr几条以上滚动
  tableScroll('tableId', 200, 30, 5)
  var MyMarhq;

  function tableScroll(tableid, hei, speed, len) {
    clearTimeout(MyMarhq);
    $('#' + tableid).parent().find('.tableid_').remove()
    $('#' + tableid).parent().prepend(
        '<table class="tableid_"><thead>' + $('#' + tableid + ' thead').html() + '</thead></table>'
    ).css({
      'position': 'relative',
      'overflow': 'hidden',
      'height': hei + 'px'
    })
    $(".tableid_").find('th').each(function(i) {
      $(this).css('width', $('#' + tableid).find('th:eq(' + i + ')').width());
    });
    $(".tableid_").css({
      'position': 'absolute',
      'top': 0,
      'left': 0,
      'z-index': 9
    })
    $('#' + tableid).css({
      'position': 'absolute',
      'top': 0,
      'left': 0,
      'z-index': 1
    })

    if ($('#' + tableid).find('tbody tr').length > len) {
      $('#' + tableid).find('tbody').html($('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html());
      $(".tableid_").css('top', 0);
      $('#' + tableid).css('top', 0);
      var tblTop = 0;
      var outerHeight = $('#' + tableid).find('tbody').find("tr").outerHeight();

      function Marqueehq() {
        if (tblTop <= -outerHeight * $('#' + tableid).find('tbody').find("tr").length) {
          tblTop = 0;
        } else {
          tblTop -= 1;
        }
        $('#' + tableid).css('margin-top', tblTop + 'px');
        clearTimeout(MyMarhq);
        MyMarhq = setTimeout(function() {
          Marqueehq()
        }, speed);
      }

      MyMarhq = setTimeout(Marqueehq, speed);
      $('#' + tableid).find('tbody').hover(function() {
        clearTimeout(MyMarhq);
      }, function() {
        clearTimeout(MyMarhq);
        if ($('#' + tableid).find('tbody tr').length > len) {
          MyMarhq = setTimeout(Marqueehq, speed);
        }
      })
    }

  }
</script>
<script type="text/javascript" src="js/home/jquery.beattext.js"></script>
<script type="text/javascript" src="js/home/easying.js"></script>

<script type="text/javascript">

  $(document).ready(function() {
    /*
     *  参数详解:
     *	upTime			上移的时间
     *	downTime		下落的时间
     *	beatHeight		上移高度
     *	isAuth			是否自动
     *	isRotate		是否旋转
    */
    $('p.beatText').beatText({isAuth:false,isRotate:false});
    $('p#rotateText').beatText({isAuth:false,isRotate:true});
    $('p#autoText').beatText({isAuth:true,beatHeight:"3em",isRotate:false});
    $('p#roloadText').beatText({isAuth:true,beatHeight:"1em",isRotate:false,upTime:100,downTime:100});
    $('p#autoRotateText').beatText({isAuth:true,upTime:700,downTime:700,beatHeight:"3em",isRotate:true});

  });

</script>
</body>
</html>